<!--
 * @Descripttion: 图像剪裁组件演示文件
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2021年7月24日20:58:51
 * @LastEditors:
 * @LastEditTime:
-->

<template>
  <el-main>
    <el-row :gutter="15">
      <el-col :lg="14">
        <el-card shadow="never">
          <sc-cropper
            ref="cropper"
            :src="cropperImg"
            :compress="compress"
            :aspect-ratio="aspectRatio"
          ></sc-cropper>
        </el-card>
        <el-card shadow="never" header="参数和方法">
          <el-form label-width="100px">
            <el-form-item label="aspectRatio">
              <el-select v-model="aspectRatio" placeholder="请选择">
                <el-option label="自由" :value="0"></el-option>
                <el-option label="1:1" :value="1 / 1"></el-option>
                <el-option label="4:3" :value="4 / 3"></el-option>
                <el-option label="16:9" :value="16 / 9"></el-option>
              </el-select>
              <div class="el-form-item-msg">固定选区或者不固定</div>
            </el-form-item>
            <el-form-item label="compress">
              <el-select v-model="compress" placeholder="请选择">
                <el-option label="0.1" :value="0.1"></el-option>
                <el-option label="0.5" :value="0.5"></el-option>
                <el-option label="1" :value="1"></el-option>
              </el-select>
              <div class="el-form-item-msg">图像压缩率，值为：0.1-1</div>
            </el-form-item>
          </el-form>
          <el-button type="primary" plain @click="getBase64">Base64</el-button>
          <el-button type="primary" plain @click="getBlob">Blob</el-button>
          <el-button type="primary" plain @click="getFile">File</el-button>
        </el-card>
        <el-card shadow="never" header="方法结果">
          <img :src="imgData" />
        </el-card>
      </el-col>
      <el-col :lg="10">
        <el-card shadow="never" header="已内置剪裁的上传组件">
          <el-alert
            title="设置cropper就可以开启上传前剪裁, 并已封装compress和aspectRatio, 打开F12查看网络请求"
            type="success"
            style="margin-bottom: 20px"
          ></el-alert>
          <sc-upload
            v-model="uploadImg"
            title="开启剪裁"
            :cropper="true"
            :compress="1"
            :aspect-ratio="1 / 1"
          ></sc-upload>
        </el-card>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
import scCropper from '@/components/scCropper'

export default {
  name: 'Cropper',
  components: {
    scCropper
  },
  data() {
    return {
      cropperImg: '/img/avatar.jpg',
      compress: 0.5,
      aspectRatio: 0,
      uploadImg: '',
      imgData: ''
    }
  },
  methods: {
    getBase64() {
      this.$refs.cropper.getCropData((data) => {
        this.imgData = data
      })
    },
    getBlob() {
      this.$refs.cropper.getCropBlob((blob) => {
        this.imgData = URL.createObjectURL(blob)
      })
    },
    getFile() {
      this.$refs.cropper.getCropFile(
        (file) => {
          let aTag = document.createElement('a')
          aTag.download = file.name
          aTag.href = URL.createObjectURL(file)
          aTag.click()
        },
        'fileName.jpg',
        'image/jpeg'
      )
    }
  }
}
</script>

<style></style>
